<template>
  <div class="content-box">
    <div class="scroll-view-box">
      <div class="data-box-left">
        <div class="user-title-box" v-if="$fieldShowFunc('31-xmxx')">项目信息</div>
        <el-descriptions class="margin-bottom" :column="3" border v-if="dataObj">
          <el-descriptions-item label="项目名称" v-if="$fieldShowFunc('kc_xmmc')">
            <div slot="label" class="justify_6">项目名称</div>
            {{ dataObj.project_name }}
          </el-descriptions-item>
          <el-descriptions-item label="项目编号" v-if="$fieldShowFunc('kc_xmbh')">
            <div slot="label" class="justify_6">项目编号</div>
            <span class="click-color" @click="hrefProjectFunc">{{ dataObj.project_number }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="项目品牌" v-if="$fieldShowFunc('kc_xmpp')">
            <div slot="label" class="justify_6">项目品牌</div>
            {{ dataObj.brand_name }}
          </el-descriptions-item>
          <el-descriptions-item label="项目类型" v-if="$fieldShowFunc('kc_xmlx')">
            <div slot="label" class="justify_6">项目类型</div>
            {{ dataObj.store_type_name }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(2, 0, 0)" :key="key"></el-descriptions-item>
        </el-descriptions>
        <div class="user-title-box" v-if="$fieldShowFunc('31-kcxx')">勘场信息</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="设计师" v-if="$fieldShowFunc('kc_sjs')">
            <div slot="label" class="justify_6">设计师</div>
            {{ dataObj.designer_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="勘场工程经理" v-if="$fieldShowFunc('kc_kcgcjl')">
            <div slot="label" class="justify_6">勘场工程经理</div>
            {{ dataObj.site_surveyors_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="勘场状态" v-if="$fieldShowFunc('kc_kczt')">
            <div slot="label" class="justify_6">勘场状态</div>
            <span v-if="dataObj.survey_site_status == 1">待勘场</span>
            <span v-if="dataObj.survey_site_status == 2">待勘场出图</span>
            <span v-if="dataObj.survey_site_status == 3">已完成</span>
            <span v-if="!dataObj.survey_site_status">--</span>
          </el-descriptions-item>
          <el-descriptions-item label="申请勘场日期" v-if="$fieldShowFunc('kc_sqkcrq')">
            <div slot="label" class="justify_6">申请勘场日期</div>
            {{ dataObj.apply_survey_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="约定勘场日期" v-if="$fieldShowFunc('kc_ydkcrq')">
            <div slot="label" class="justify_6">约定勘场日期</div>
            {{ dataObj.survey_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="实际勘场日期" v-if="$fieldShowFunc('kc_sjkcrq')">
            <div slot="label" class="justify_6">实际勘场日期</div>
            {{ dataObj.actual_survey_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="现场图片" v-if="$fieldShowFunc('kc_xctp')">
            <div slot="label" class="justify_6">现场图片</div>
            <template v-if="dataObj.project_file">
              <div class="file-box-img-box flex ac" v-if="dataObj.project_file.scene_file.length">
                <div class="file-box-img" v-for="(item, index) in dataObj.project_file.scene_file" :key="index">
                  <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                    <img @click="$fileViewHandle(item)" class="img" :src="$fileImgFunc(item)" />
                  </el-tooltip>
                </div>
              </div>
              <span v-if="!dataObj.project_file.scene_file.length">--</span>
            </template>
          </el-descriptions-item>
          <el-descriptions-item label="现场视频" v-if="$fieldShowFunc('kc_xcsp')">
            <div slot="label" class="justify_6">现场视频</div>
            <template v-if="dataObj.project_file">
              <div class="file-box-img-box flex ac" v-if="dataObj.project_file.video_file.length">
                <div class="file-box-img" v-for="(item, index) in dataObj.project_file.video_file" :key="index">
                  <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                    <img @click="$fileViewHandle(item)" class="img" :src="$fileImgFunc(item)" />
                  </el-tooltip>
                </div>
              </div>
              <span v-if="!dataObj.project_file.video_file.length">--</span>
            </template>
          </el-descriptions-item>
          <el-descriptions-item label="勘场报告" v-if="$fieldShowFunc('kc_kcbg')">
            <div slot="label" class="justify_6">勘场报告</div>
            <template v-if="dataObj.project_file">
              <div class="file-box-img-box flex ac" v-if="dataObj.project_file.report_file.length">
                <div class="file-box-img" v-for="(item, index) in dataObj.project_file.report_file" :key="index">
                  <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                    <img @click="$fileViewHandle(item)" class="img" :src="$fileImgFunc(item)" />
                  </el-tooltip>
                </div>
              </div>
              <span v-if="!dataObj.project_file.report_file.length">--</span>
            </template>
          </el-descriptions-item>
          <el-descriptions-item label="手绘图" v-if="$fieldShowFunc('kc_sht')">
            <div slot="label" class="justify_6">手绘图</div>
            <template v-if="dataObj.project_file">
              <div class="file-box-img-box flex ac" v-if="dataObj.project_file.sketch_file.length">
                <div class="file-box-img" v-for="(item, index) in dataObj.project_file.sketch_file" :key="index">
                  <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                    <img @click="$fileViewHandle(item)" class="img" :src="$fileImgFunc(item)" />
                  </el-tooltip>
                </div>
              </div>
              <span v-if="!dataObj.project_file.sketch_file.length">--</span>
            </template>
          </el-descriptions-item>
          <el-descriptions-item label="勘场资料" v-if="$fieldShowFunc('kc_kczl')">
            <div slot="label" class="justify_6">勘场资料</div>
            <template v-if="dataObj.project_file">
              <div class="file-box-img-box flex ac" v-if="dataObj.project_file.survey_data.length">
                <div class="file-box-img" v-for="(item, index) in dataObj.project_file.survey_data" :key="index">
                  <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                    <img @click="$fileViewHandle(item)" class="img" :src="$fileImgFunc(item)" />
                  </el-tooltip>
                </div>
              </div>
              <span v-if="!dataObj.project_file.survey_data.length">--</span>
            </template>
          </el-descriptions-item>
          <el-descriptions-item label="勘场出图时间" v-if="$fieldShowFunc('kc_kcctsj')">
            <div slot="label" class="justify_6">勘场出图时间</div>
            {{ dataObj.upload_materials_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(2, 0, 1)" :key="key"></el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>
<script>
import designApi from "@/api/designApi";
import projectMsg from "@/components/ProjectMsg";
export default {
  name: 'siteSurveyDetailPage',
  components: {
    projectMsg,
  },
  data() {
    return {
      dataObj: {}
    };
  },
  computed: {

  },
  mounted() {
    this.siteSurveyProjectDetails();//勘场详情
  },
  methods: {
    // 勘场详情
    siteSurveyProjectDetails() {
      if (!this.$route.query.id) return;
      designApi.siteSurveyProjectDetails({
        project_id: this.$route.query.id
      }).then(res => {
        console.log(res, "勘场详情")
        if (res.code == 200) {
          this.dataObj = res.data;
        }
      })
    },
    hrefProjectFunc() {
      this.$router.push({ path: '/projectDetailNew', query: { id: this.dataObj.id } })
    },
  },
};
</script>
<style lang="scss" scoped>
@import '@/styles/detail.scss';
</style>
<style lang="scss">
.labelClassName {
  width: 160px;
  background: #f5f8fe !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.contentClassName {
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #1b2431 !important;
  padding-left: 20px !important;
}

.labelClassName2 {
  width: 160px;
  background: rgba(0, 0, 0, 0) !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  border: none !important;
}

.contentClassName2 {
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #1b2431 !important;
  padding-left: 20px !important;
  border: none !important;
}
</style>